<template>
  <view class="goods_detali">
    <u-swiper :list="goodsDetailList" name="pics_big" img-mode="aspectFit" height="497" @click="swiperFn"></u-swiper>
    <view class="goods_info">
      <view class="goods_price"> <text>￥</text>{{goods.message.goods_price}} 
      <view class="icon"><u-icon class="share" name="share" color="#b2b2b2" size="40"></u-icon> <u-icon class="star" name="star"  color="#b2b2b2" size="40"></u-icon></view>
      </view>
      <view class="goods_text u-line-2">{{goods.message.goods_name}}</view>
    </view> 
    <view class="line"></view>
    <u-parse :html="goods.message.goods_introduce"></u-parse>
      <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator open-type="switchTab" url="/pages/cart/cart" class="item car">
          <u-badge class="car-num" :count="cartNum" type="error" :offset="[-3, -6]"></u-badge>
          <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return{
      goodsDetailList:[],
      goods:null
    }
  },
  async onLoad({goods_id}){
    // console.log(goods_id);
    const id=goods_id||43986
    this.goods = await this.$u.get('/goods/detail',{goods_id:id})
    console.log(this.goods);
    this.goodsDetailList=this.goods.message.pics

    
  },
  methods:{
    swiperFn(index){
      console.log(index);
      const urls=this.goodsDetailList.map(i=>i.pics_big)
      const current=this.goodsDetailList[index].pics_big
      uni.previewImage({urls,current})
    },
    async addCart(){
      // console.log(1);
      // console.log(63,this.goods.message);
      await this.$store.commit('add',this.goods.message)
      console.log(65,this.$store.state.cartList)
      uni.setStorageSync('cartList',this.$store.state.cartList)
    }
  },
  computed:{
    cartNum(){
      let sun=0
      this.$store.state.cartList.forEach(item => {
        sun+=item.goods_num})
      return sun
    },
    ...mapState(['cartList'])
  }
}
</script>

<style lang="scss" scoped>
.goods_detali{
  padding-bottom: 104rpx;
}
.goods_info{
  .goods_price{
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 700;
    font-size: 40rpx;
    color:#eb4450 ;
    text{
      font-size: 26rpx;
    }
    .icon{
      float: right;
      .share{
        margin-right:30rpx ;
      }
      .star{
        margin-right:25rpx ;
      }
    }
  }
  .goods_text{
    padding: 15rpx;
    font-size: 35rpx;
    font-weight: 700;
  }
}
.line{
  width: 100vw;
  height: 40rpx;
  background-color: #f9f9f9;
}
.navigation {
  position: fixed;
  width: 100vw;
  left: 0;
  bottom: 0;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>